<template>
	<view class="bigbox">
		<view class="top">
			<image src="../../static/image/logo.png"></image>
			<view class="title">{{list.title}}</view>
			<view>参考价格：<span class="price">￥ {{list.price}}</span></view>
			<view class="biaoqianbox">
				<view class="biaoqian" v-for="item in list.biaoqian" v-key='item'>{{item}}</view>
			</view>
		</view>
		<view class="mid">
			<OptionList :list="true" :options="list"></OptionList>
		</view>
		<view class="bottom">
			<view class="bottom-title">方案描述：</view>
			<!-- <view>
				<image></image>
				<text></text>
			</view> -->
			<view class="bottom-dec">{{list.miaoshu}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"RecommendItem",
		data() {
			return {
				
			};
		},
		props:{
			list:{
				type:Object,
				required:true
			}
		}
	}
</script>

<style lang="scss" scoped>
.bigbox{
	padding: 10px;
}
.top{
	width: 70vw;
	text-align: center;
	image{
		width: 20vw;
		height: 12vh;
	}
	view{
		text-align: left;
		margin-bottom: 10px;
	}
	.title{
		font-size: 18px;
		font-weight: bold;
	}
	.price{
		color: red;
	}
	.biaoqianbox{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: #FFFFFF;
		font-size: 14px;
		margin-bottom: 0px;
		.biaoqian{
			background-color: #1296db;
			margin-right: 5px;
			padding: 3px 5px;
			border-radius: 10px;
		}
		
	}
}
.bottom{
	margin-top: 2vh;
	.bottom-title{
		margin-bottom: 2vh;
		font-weight: bold;
	}
	.bottom-dec{
		font-size: 14px;
		line-height: 20px;
		color: black;
		
	}
}
</style>
